import React from "react";
import {
  createStackNavigator,
  createBottomTabNavigator,
  createSwitchNavigator,
  createAppContainer,
} from "react-navigation";
import { Image } from "react-native";
import {
  Color, ScreenWidth, FontSize, isIOS, scale,
} from "./common/index";

import NavigatorUtil from "./utils/NavigatorUtil";

import HeaderTitleText from "./widget/common/HeaderTitleText";
import BackArrow from "./widget/common/BackArrow";
import HeaderRight from "./widget/common/HeaderRight";
// ==== 有区别 ====
import H5Page from "./pages/H5Page";
import Login from "./pages/Login";
import Home from "./pages/Home";
import Recycle from "./pages/Recycle";
import Mine from "./pages/Mine";
import PlaceServiceOrder from "./pages/PlaceServiceOrder";
import ServiceInfo from "./pages/ServiceInfo";
import ChooseDeviceModel from "./pages/ChooseDeviceModel";
import RecyclePriceInfo from "./pages/RecyclePriceInfo";
import ChooseTrouble from "./pages/ChooseTrouble";
import UpdateInfo from "./pages/UpdateInfo";
import HelpCenter from "./pages/HelpCenter";
import EditAddress from "./pages/EditAddress";
import Setting from "./pages/Setting";
import AddressList from "./pages/AddressList";
import EditUserInfo from "./pages/EditUserInfo";
import Suggest from "./pages/Suggest";
import OrderSuccess from "./pages/OrderSuccess";
import RecycleAccessResult from "./pages/RecycleAccessResult";
import AccessResultInfo from "./pages/AccessResultInfo";
import PlaceRecycleOrder from "./pages/PlaceRecycleOrder";
import OrderInfo from "./pages/OrderInfo";
import OrderList from "./pages/OrderList";
import QuickOrder from "./pages/QuickOrder";
import BindMobileGetCode from "./pages/BindMobileGetCode";
import BindMobile from "./pages/BindMobile";
import FirstLunch from "./pages/FirstLunch";
import { isEmpty } from "./utils/utils";

const stackNavConfig = initialRouteName => ({
  mode: "card", // 页面切换模式, 左右是card(相当于iOS中的push效果), 上下是modal(相当于iOS中的modal效果)
  // 让安卓实现push动画
  headerMode: isIOS ? "float" : "screen",
  initialRouteName,
  initialRouteParams: {
    showBackButton: true,
    showRightButton: false,
  },
  defaultNavigationOptions: {
    headerBackTitle: null,
    headerTruncatedBackTitle: `to A`,
    headerTintColor: Color.black,
    headerStyle: {
      backgroundColor: Color.bg_titlebar,
      elevation: 0,
      borderBottomWidth: 0,
    },
    headerRight: <HeaderRight />,
    headerLeft: <HeaderRight />,
    headerTitleStyle: {
      textAlign: "center",
      alignSelf: "center",
      fontSize: FontSize.SIZE_18,
      color: Color.white,
    },
  },
});

const HomeTabNav = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: ({ navigation }) => ({
        title: "首页",
        headerTitle: <HeaderTitleText title="首页" />,
        tabBarIcon: ({ focused }) => (
          <Image
            width="28"
            height="28"
            source={focused ? require("./img/tab_home_selected.png") : require("./img/tab_home_unselected.png")}
          />
        ),
      }),
    },
    Recycle: {
      screen: Recycle,
      navigationOptions: ({ navigation }) => ({
        title: "回收",
        headerTitle: <HeaderTitleText title="回收" />,
        tabBarIcon: ({ focused }) => (
          <Image
            width="28"
            height="28"
            source={focused ? require("./img/tab_recycle_selected.png") : require("./img/tab_recycle_unselected.png")}
          />
        ),
      }),
    },
    Mine: {
      screen: Mine,
      navigationOptions: ({ navigation }) => ({
        title: "我的",
        headerTitle: <HeaderTitleText title="我的" />,
        tabBarIcon: ({ focused }) => (
          <Image
            width="28"
            height="28"
            source={focused ? require("./img/tab_mine_selected.png") : require("./img/tab_mine_unselected.png")}
          />
        ),
      }),
    },
  },
  {
    animationEnabled: true, // 切换页面时不显示动画
    tabBarPosition: "bottom", // 显示在顶端，android 默认是显示在页面顶端的
    swipeEnabled: false, // 禁止左右滑动
    backBehavior: "none", // 按 back 键是否跳转到第一个 Tab， none 为不跳转
    lazy: true,
    // initialRouteName: routerKey,
    initialRouteName: "Home",
    tabBarOptions: {
      activeTintColor: Color.colorPrimary, // 文字和图片选中颜色
      inactiveTintColor: Color.tab_normal, // 文字和图片默认颜色
      showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
      showLabel: true,
      indicatorStyle: {
        height: 0,
        backgroundColor: Color.white,
      }, // android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了， 不知道还有没有其它方法隐藏？？？
      style: {
        backgroundColor: Color.white, // TabBar 背景色
        width: ScreenWidth,
        elevation: 0,
      },
      tabStyle: {
        alignItems: "center",
        justifyContent: "center",
        width: ScreenWidth / 2,
      },
    },
  },
);

const LunchStackNavigator = createStackNavigator(
  {
    FirstLunch: {
      screen: FirstLunch,
      navigationOptions: ({ navigation }) => {
        return {
          header: null,
        };
      },
    },
  },
  stackNavConfig("FirstLunch"),
);

const AppStackNavigator = createStackNavigator(
  {
    HomeTab: {
      screen: HomeTabNav,
      navigationOptions: ({ navigation }) => {
        let title;
        const focusedRouteName = navigation.state.routes[navigation.state.index].routeName;
        let headerBgColor;
        let titleColor;
        if (focusedRouteName === "Home") {
          title = "给力快修回收";
          headerBgColor = Color.bg_titlebar;
          titleColor = Color.text_title;
        } else if (focusedRouteName === "Recycle") {
          title = "回收";
          headerBgColor = Color.tab_yellow;
          titleColor = Color.white;
        } else if (focusedRouteName === "Mine") {
          headerBgColor = Color.tab_yellow;
          titleColor = Color.white;
        }
        return {
          headerTitle: title ? <HeaderTitleText title={title} color={titleColor} /> : null,
          headerStyle: {
            backgroundColor: headerBgColor,
            borderBottomWidth: 0,
            elevation: 0,
          },
          headerTitleStyle: {
            textAlign: "center",
            alignSelf: "center",
            fontSize: FontSize.SIZE_18,
            color: Color.white,
          },
        };
      },
    },
    ChooseDeviceModel: {
      screen: ChooseDeviceModel,
      navigationOptions: ({ navigation }) => {
        return {
          title: "机型选择",
          headerStyle: {
            borderBottomWidth: 0,
            elevation: 0,
          },
          headerTitle: <HeaderTitleText title="机型选择" />,
          headerLeft: <BackArrow />,
        };
      },
    },
    UpdateInfo: {
      screen: UpdateInfo,
      navigationOptions: ({ navigation }) => {
        const title = "内存升级";
        return {
          title,
          headerStyle: {
            borderBottomWidth: 0,
            elevation: 0,
          },
          headerTitle: <HeaderTitleText title={title} />,
          headerLeft: <BackArrow />,
        };
      },
    },
    AddressList: {
      screen: AddressList,
      navigationOptions: ({ navigation }) => {
        const { state } = navigation;
        const { title = "地址管理" } = state.params;
        return {
          title,
          headerStyle: {
            borderBottomWidth: 0,
            elevation: 0,
          },
          headerTitle: <HeaderTitleText title={title} />,
          headerLeft: <BackArrow />,
        };
      },
    },
    EditAddress: {
      screen: EditAddress,
      navigationOptions: ({ navigation }) => {
        const { state } = navigation;
        const { title = "添加收货地址" } = state.params;
        return {
          title,
          headerStyle: {
            borderBottomWidth: 0,
            elevation: 0,
          },
          headerTitle: <HeaderTitleText title={title} />,
          headerLeft: <BackArrow />,
        };
      },
    },
    OrderList: {
      screen: OrderList,
      navigationOptions: ({ navigation }) => {
        const { state } = navigation;
        const { title = "订单" } = state.params;
        return {
          title,
          headerStyle: {
            borderBottomWidth: 0,
            elevation: 0,
          },
          headerTitle: <HeaderTitleText title={title} />,
          headerLeft: <BackArrow />,
        };
      },
    },
    Setting: {
      screen: Setting,
      navigationOptions: ({ navigation }) => {
        const title = "设置";
        return {
          title,
          headerStyle: {
            borderBottomWidth: 0,
            elevation: 0,
          },
          headerTitle: <HeaderTitleText title={title} />,
          headerLeft: <BackArrow />,
        };
      },
    },
    HelpCenter: {
      screen: HelpCenter,
      navigationOptions: ({ navigation }) => {
        const { state } = navigation;
        const { title = "帮助中心" } = state.params;
        return {
          title,
          headerStyle: {
            borderBottomWidth: 0,
            elevation: 0,
          },
          headerTitle: <HeaderTitleText title={title} />,
          headerLeft: <BackArrow />,
        };
      },
    },
    ServiceInfo: {
      screen: ServiceInfo,
      navigationOptions: ({ navigation }) => {
        const { state } = navigation;
        const { serviceItem } = state.params;
        const { brand_name, facility_name } = serviceItem;
        const brandName = isEmpty(brand_name) ? "" : brand_name;
        const title = `${brandName} ${facility_name}`;
        return {
          title,
          headerStyle: {
            borderBottomWidth: 0,
            elevation: 0,
          },
          headerTitle: <HeaderTitleText title={title} />,
          headerLeft: <BackArrow />,
        };
      },
    },
    RecyclePriceInfo: {
      screen: RecyclePriceInfo,
      navigationOptions: ({ navigation }) => {
        const { state } = navigation;
        const { serviceItem } = state.params;
        const { brand_name, facility_name } = serviceItem;
        const brandName = isEmpty(brand_name) ? "" : brand_name;
        const title = `${brandName} ${facility_name}`;
        return {
          title,
          headerStyle: {
            borderBottomWidth: 0,
            elevation: 0,
          },
          headerTitle: <HeaderTitleText title={title} />,
          headerLeft: <BackArrow />,
        };
      },
    },
    ChooseTrouble: {
      screen: ChooseTrouble,
      navigationOptions: ({ navigation }) => {
        const title = "选择故障";
        return {
          title,
          headerStyle: {
            borderBottomWidth: 0,
            elevation: 0,
          },
          headerTitle: <HeaderTitleText title={title} />,
          headerLeft: <BackArrow />,
        };
      },
    },
    PlaceServiceOrder: {
      screen: PlaceServiceOrder,
      navigationOptions: ({ navigation }) => {
        return {
          title: "立即下单",
          headerStyle: {
            borderBottomWidth: 0,
            elevation: 0,
          },
          headerTitle: <HeaderTitleText title="立即下单" />,
          headerLeft: <BackArrow />,
        };
      },
    },
    PlaceRecycleOrder: {
      screen: PlaceRecycleOrder,
      navigationOptions: ({ navigation }) => {
        return {
          title: "提交下单",
          headerStyle: {
            borderBottomWidth: 0,
            elevation: 0,
          },
          headerTitle: <HeaderTitleText title="提交下单" />,
          headerLeft: <BackArrow />,
        };
      },
    },
    RecycleAccessResult: {
      screen: RecycleAccessResult,
      navigationOptions: ({ navigation }) => {
        return {
          title: "评估结果",
          headerStyle: {
            borderBottomWidth: 0,
            elevation: 0,
          },
          headerTitle: <HeaderTitleText title="评估结果" />,
          headerLeft: <BackArrow />,
        };
      },
    },
    AccessResultInfo: {
      screen: AccessResultInfo,
      navigationOptions: ({ navigation }) => {
        return {
          title: "评估详情",
          headerStyle: {
            borderBottomWidth: 0,
            elevation: 0,
          },
          headerTitle: <HeaderTitleText title="评估详情" />,
          headerLeft: <BackArrow />,
        };
      },
    },
    ModalLogin: {
      screen: Login,
      navigationOptions: ({ navigation }) => {
        return {
          title: "给力快修",
          headerStyle: {
            borderBottomWidth: 0,
            elevation: 0,
          },
          headerTitle: <HeaderTitleText title="给力快修" />,
        };
      },
    },
    EditUserInfo: {
      screen: EditUserInfo,
      navigationOptions: ({ navigation }) => {
        return {
          title: "个人资料",
          headerStyle: {
            borderBottomWidth: 0,
            elevation: 0,
          },
          headerTitle: <HeaderTitleText title="个人资料" />,
          headerLeft: <BackArrow />,
        };
      },
    },
    QuickOrder: {
      screen: QuickOrder,
      navigationOptions: ({ navigation }) => {
        return {
          title: "一键预约",
          headerStyle: {
            borderBottomWidth: 0,
            elevation: 0,
          },
          headerTitle: <HeaderTitleText title="一键预约" />,
          headerLeft: <BackArrow />,
        };
      },
    },
    BindMobileGetCode: {
      screen: BindMobileGetCode,
      navigationOptions: ({ navigation }) => {
        return {
          title: "",
          headerStyle: {
            borderBottomWidth: 0,
            elevation: 0,
          },
          headerTitle: <HeaderTitleText title="" />,
          headerLeft: <BackArrow />,
        };
      },
    },
    BindMobile: {
      screen: BindMobile,
      navigationOptions: ({ navigation }) => {
        return {
          title: "",
          headerStyle: {
            borderBottomWidth: 0,
            elevation: 0,
          },
          headerTitle: <HeaderTitleText title="" />,
          headerLeft: <BackArrow />,
        };
      },
    },
    Suggest: {
      screen: Suggest,
      navigationOptions: ({ navigation }) => {
        return {
          title: "意见反馈",
          headerStyle: {
            borderBottomWidth: 0,
            elevation: 0,
          },
          headerTitle: <HeaderTitleText title="意见反馈" />,
          headerLeft: <BackArrow />,
        };
      },
    },
    OrderSuccess: {
      screen: OrderSuccess,
      navigationOptions: ({ navigation }) => {
        return {
          title: "下单成功",
          headerStyle: {
            borderBottomWidth: 0,
            elevation: 0,
          },
          headerTitle: <HeaderTitleText title="下单成功" />,
          headerLeft: <BackArrow onPress={() => NavigatorUtil.goHome()} />,
        };
      },
    },
    OrderInfo: {
      screen: OrderInfo,
      navigationOptions: ({ navigation }) => {
        return {
          title: "订单详情",
          headerStyle: {
            borderBottomWidth: 0,
            elevation: 0,
          },
          headerTitle: <HeaderTitleText title="订单详情" />,
          headerLeft: <BackArrow />,
        };
      },
    },
    H5Page: {
      screen: H5Page,
    },
  },
  stackNavConfig("HomeTab"),
);

const prevGetStateForActionAppStack = AppStackNavigator.router.getStateForAction;

AppStackNavigator.router.getStateForAction = (action, state) => {
  if (state && action.type && action.type === "ReplaceCurrentScreen") {
    const routes = state.routes.slice(0, state.routes.length - 1);
    routes.push(action);
    return {
      ...state,
      routes,
      index: routes.length - 1,
    };
  }
  if (state && action.type && action.type === "ReplaceTwoScreen") {
    const routes = state.routes.slice(0, state.routes.length - 2);
    routes.push(action);
    return {
      ...state,
      routes,
      index: routes.length - 1,
    };
  }
  if (state && action.type && action.type === "goHome") {
    const routes = state.routes.slice(0, 1);
    return {
      ...state,
      routes,
      index: 0,
    };
  }
  if (state && action.type && action.type === "backTwoPage") {
    const routes = state.routes.slice(0, state.routes.length - 2);
    return {
      ...state,
      routes,
      index: routes.length - 1,
    };
  }
  return prevGetStateForActionAppStack(action, state);
};

const Navigator = createSwitchNavigator(
  {
    LunchStackNavigator,
    AppStackNavigator,
  },
  {
    initialRouteName: "LunchStackNavigator",
  },
);

export default createAppContainer(Navigator);
